<template>
  <div class="select_main" v-if="selShow" @click="closePopup($event)">
    <div class="select_box">
      <div class="select_list" v-for="(v, k) in map" @click="() => childFn({k, v})">{{v}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      map: {
        type: Object,
        default: {}
      },
      id: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
      }
    },
    computed:{
      selShow() { return this.$store.state.selectType === this.id;}
    },
    methods: {
      childFn: function(map){
        this.$emit('fartherFn', map);
        this.$store.commit('changeSelectType',"hide")
      },
      closePopup : function(e) {
        if(e.target.className === 'select_main') {
          this.$store.commit('changeSelectType',"hide")
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .select_main {
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.4);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1003;
    opacity: 1;
  }
  .select_box {
    width: 100%;
    position: absolute;
    right: 0;
    bottom:0;
    z-index: 0;
    background: #000;
  }
  .select_list {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid rgba(216, 188, 132, .6);
    font-size: 14px;
    font-weight: 400;
    color: $color;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }
</style>
